✨[Feat] Modal 컴포넌트, 프로필 수정 / 리뷰 작성 모달 개발 #141 #145
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…-컴포넌트를-모달-기능까지-확장
haegu97
added
🎨 Design
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
haegu97
changed the title
cloud0406
approved these changes
Dec 13, 2024
Comment on lines
+10
to
+11
| cancelText: string; | ||
| confirmText: string; |
Contributor
There was a problem hiding this comment.
p5: 이건 추후에 확인, 취소 등으로 디폴트값을 설정하고 앞으로 모달작업할 때 의미가 통할만한 부분은 취소, 확인으로 고정하는식으로 가도 좋을 것 같네요. 저번에 멘토님과 멘토링하면서 느꼈던건데 디자인도 중요하지만 저희가 어느정도 가볍게 갈 수 있는 부분은 계속 전달 드리는게 좋을 것 같다는 생각이 들었습니다!
| 모임은 어떠셨나요? | ||
| </h3> | ||
| <div className="flex gap-1"> | ||
| {RATING_RANGE.map((heart) => ( |
Contributor
There was a problem hiding this comment.
p4: 아마 이부분은 민경님이 이전에 작성해주셨던 컴포넌트중에 ratingDisplay라는 컴포넌트를 활용해도 되지 않을까 싶습니다!
당장 기능상에 문제가 있는건 아니니 추후에 리팩토링해도 좋을 것 같아요!
There was a problem hiding this comment.
StarRate, Rate 여러가지가 있지만,
점수 스코어를 관리하기 위한 별도 공용 컴포넌트가 있으면 좋겠어요.
public/icons/ReviewHeartIcon.tsx
Outdated
| @@ -0,0 +1,40 @@ | |||
| import { SVGProps } from 'react'; | |||
|
|
|||
| interface ReviewHeartIconProps extends SVGProps<SVGSVGElement> { | |||
Contributor
There was a problem hiding this comment.
p4: 아마 민경님이 컴포넌트 작업하시면서 만든 평점 아이콘이 있을 것 같아서 그걸 재활용해도 좋을 것 같네요!
밑에서도 이 아이콘을 활용한 부분을 민경님이 작업하신 컴포넌트로 대체가 가능할 것 같습니다. 당장은 시연까지 구현해야할 부분이 많으니 추후에 리팩토링하면 좋을 것 같아요!
wynter24
approved these changes
Dec 13, 2024
Contributor
wynter24
left a comment
wynter24
left a comment
There was a problem hiding this comment.
정리가 잘 되어 있어서 이해하기 좋았어요!
수고하셨습니다:)
sunnwave
approved these changes
Dec 13, 2024
src/components/modal/Modal.tsx
Outdated
| <div className="mb-4 flex items-center justify-between"> | ||
| <h2 className="text-xl font-semibold">{title}</h2> | ||
| <button onClick={onClose} className="text-gray-500"> | ||
| ✕ |
Contributor
There was a problem hiding this comment.
p4: public/icons 에 icClose 아이콘 있어서 그거 활용해도 될 것 같아요!
| <div className="rounded-full border-2 border-gray-normal-01"> | ||
| <Avatar src={formData.image || ''} alt="프로필 이미지" size="xl" /> | ||
| </div> | ||
| <button |
There was a problem hiding this comment.
input으로 이미지를 어떻게 추가할까요?
<input type="file" id="imageInput" accept="image/*" />There was a problem hiding this comment.
인풋에 ref를 걸어서 ref current를 참고하면 버튼을 클릭해서 업로드를 실행시킬 수 있을 거에요.
There was a problem hiding this comment.
- 이벤트 타겟의 파일을 확인하고
- 유효성 검증을 실행하고 (용량, 확장자, 여러가지)
- 만약 이미지 파일의 크기를 줄여야 한다면, await문으로 라이브러리 컴포넌트를 호출
- 최종적으로 조정된 이미지를 api요청으로 업로드
- 마지막으로 response를 객체를 setState해주시면 됩니다.
| onConfirm, | ||
| profileData, | ||
| }: ProfileEditModalProps) { | ||
| const { user } = useAuthStore(); |
There was a problem hiding this comment.
페이지를 새로고침 후에, 어떻게 유저 정보가 계속 남는지 정리하기!
persist, 로컬 스토리지.
| 모임은 어떠셨나요? | ||
| </h3> | ||
| <div className="flex gap-1"> | ||
| {RATING_RANGE.map((heart) => ( |
There was a problem hiding this comment.
StarRate, Rate 여러가지가 있지만,
점수 스코어를 관리하기 위한 별도 공용 컴포넌트가 있으면 좋겠어요.
haegu97
added a commit
that referenced
this pull request
Dec 15, 2024
* 💄[Design] 전역 배경 색상 및 패딩 설정 #13 * 📦[Chore] discord webhook 연결 (#25) * 📦[Chore] discord webhook 연결 * 📦[Chore] 웹훅 테스트 메시지 수정 * 📦[Chore]: 메시지 수정 * ✨ [Feature] participantcounter 컴포넌트 만들기 (#27) * ✨[Feat] 기본 tsx, test, storybook 코드 작성 * 🐛[Fix] jest test error fix * 📦[Chore] typscript-eslint version up * 📦[Chore] storybook chromaic action 조건 수전 * ✨[Feature] ConfirmedLabel 컴포넌트 개발 (#28) * 📦[Chore] 폴더명 수정 * ✅[Test] test 코드 작성 * ✨[Feat] 컴포넌트 개발 * 💄[Design] 스토리북 코드 작성 * ✨[Feat] �헤더 네비게이션 바 구현#9 (#29) * ✨[Feat] 네비게이션 바 UI, 메뉴 클릭시 해당 페이지로 라우팅 기능 구현 #9 * 💄[Design] 전역 padding 적용 body에서 main으로 수정 #9 * ♻️[Refactor] HeaderBar에서 NavButton 분리 #9 * ✅[Test] 헤더 네비게이션 바 테스트 #12 * ✅[Test] 헤더바 스토리북 코드 작성 #12 * ✨ [Feature] progressBar 컴포넌트 개발 (#30) * ✅[Test] 테스트 코드 작성 * ✨[Feat] 컴포넌트, 스토리북 개발 * ✨ [Feat] TextChip 컴포넌트 개발 (#33) * ✅[Test] 테스트 코드 작성 * ✨[Feat] 컴포넌트 개발 * 💄[Design] 스토리북 작성 * 💄[Design] rootlayout 상단 padding 추가 (#65) * ✨[Feat] 공통컴포넌트 button 구현 #11 (#37) * ✅[Test] 버튼 테스트 코드 작성 #11 * 📦[Chore] jest.config 수정 * 📦[Chore] tailwind-merge 설치 * ✨[Feat] 버튼 컴포넌트 생성 및 초기 디자인 설정 * 💄[Design] 버튼 기본 스타일 cursor-pointer로 설정 * ✅[Test] 스타일 테스트 추가 * ♻️[Refactor] Home 페이지 button 컴포넌트에 props 추가 * ♻️[Refactor] 타입 선언 type에서 interface로 변경 #11 * 💄[Design] 스토리북 코드 작성 #11 * 💄[Design] 최소 너비 설정 #11 * 📦[Chore] tailwind content 수정 #11 * 📦[Chore] tailwind content 수정 #11 * ♻️[Refactor] button props 변경 및 해당 스타일 설정 #11 * ♻️[Refactor] button props 변경 #11 * ✅[Test] 스타일 관련 테스트 코드 삭제 #11 * 💄[Design] 스토리북 args 수정 #11 * 💬[Comment] test 코드 주석 정리 #11 * ♻️[Refactor] 사이즈, 배경, 색상을 객체 리터럴로 변경 및 variant 추가 #11 * 📝[Docs] 스토리북 버튼 텍스트 및 이름 수정 #11 * ♻️[Refactor] 중복 색상 삭제 및 variantColor에 gray 추가 #11 * 🎨[Style] 상수 이름 영문 대문자 스네이크 표기법으로 변경 #11 * 🎨[Style] 깃 컨벤션 - 함수 표현식에서 함수 선언식으로 수정 #11 * 🔥[Remove] 초기 설정에 bookclub에 작성했던 button 삭제 #11 * ♻️[Refactor] 배경스타일 및 색상 variant 변경 #11 * 📝[Docs] 변경된 Button props명으로 스토리북 args 수정 #11 * ✅[Test] 변경된 props에 따른 테스트 코드 수정 #11 * 📦[Chore] ci 작업 범위 및 메시지 수정 (#53) * ✨[Feat] WrittenReview, RatingDisplay 컴포넌트 생성 #38 (#49) * ✨[Feat] 평점 표시용 RatingIcon 컴포넌트 추가 #38 * 🔥[Remove] 초시 설정때 생성된 불필요한 Button2 폴더 삭제 #38 * ♻️[Refactor] RatingIcon heartColor에서 checked로 prop 변경 #38 * ✨[Feat] 평점 공통컴포넌트 생성 #38 * ✨[Feat] RatingDisplay 스토리북 작성 #38 * ✨[Feat] WrittenReview 공통 컴포넌트 생성 #38 * ✨[Feat] WrittenReview 스토리북 작성 #38 * 🐛[Fix] WrittenReview 이미지 에러 처리 #38 * ✅[Test] WrittenReview 테스트 코드 작성 #38 * 🚚[Rename] rating에서 rating-display로 폴더명 수정 #38 * 💄[Design] 텍스트 dp font-medium 속성 추가 #38 * 📦[Chore] 줄 바꿈 스타일(LF) 통일 .gitattributes 파일 추가 #70 (#71) * ✨[Feat] Color system 및 breakpoint, storybook preview 적용 (#76) * ✨[Feat] color 시스템 도입 * ✨[Feat] 반응형 screen 및 storybook viewport 추가 * ✨[Feat] Avatar, AvatarGroup 컴포넌트 구현 (#69) * ✨[Feat] Avatar 컴포넌트 생성 * ✅[Test] avatar test 코드 작성 * ✅[Test] avatar storybook 코드 작성 * ♻️[Refactor] avatar 컴포넌트 코드 수정 * ✨[Feat] avatargroup 컴포넌트 개발 * ♻️[Refactor] avatarsize 상수 분리 * ✅[Test] avatargroup storybook 코드 작성 * ✨[Feat] avatar onClick 추가 * ✅[Test] avatar test 코드 수정 * ✅[Test] avatargroup test 코드 작성 * 🎨[Style] 따옴표 코드 포맷팅 변경 * ✨[Feat] CardList 컴포넌트 개발 (#42) * ✨[Feat] 아이콘 컴포넌트 생성 * ✨[Feat] 컴포넌트 모바일 디자인 개발 * ✅ [Test] 스토리북 및 preview 추가 #20 * 💄 [Design] padding 변경 #20 * ♻️[Refactor] tailwind config 수정 * ♻️[Refactor] textchip props 이름 변경 * 💄[Design] 반응형 적용, break point 적용 * ✨[Feat] 찜 아이콘 props 및 clickevent props 추가 * 💄[Design] boxsizing 추가 * ✨[Feat] 마감 지우기 아이콘 개발 * 💄[Design] 마감 오버레이 적용 * ✅[Test] 스토리북 여러 환경 테스트 * ♻️[Refactor] props 이름 변경 * ✅[Test] test 코드 작성 * ♻️[Refactor] 레이아웃 코드 수정, 주석 변경 * ✅[Test] 오버레이 테스트 코드 변경 * ✅[Test] 스토리북 코드 변경 * 💄[Design] text css 조정 * 🚚[Rename] 컴포넌트 이름 변경 * ✨[Feat] 아이콘 컴포넌트 생성 * ✨[Feat] 컴포넌트 모바일 디자인 개발 * ✅ [Test] 스토리북 및 preview 추가 #20 * 💄 [Design] padding 변경 #20 * ♻️[Refactor] textchip props 이름 변경 * 💄[Design] 반응형 적용, break point 적용 * ✨[Feat] 찜 아이콘 props 및 clickevent props 추가 * 💄[Design] boxsizing 추가 * ✨[Feat] 마감 지우기 아이콘 개발 * 💄[Design] 마감 오버레이 적용 * ✅[Test] 스토리북 여러 환경 테스트 * ♻️[Refactor] props 이름 변경 * ✅[Test] test 코드 작성 * ♻️[Refactor] 레이아웃 코드 수정, 주석 변경 * ✅[Test] 오버레이 테스트 코드 변경 * ✅[Test] 스토리북 코드 변경 * 💄[Design] text css 조정 * 🚚[Rename] 컴포넌트 이름 변경 * 🔥[Remove] 불필요 구문 제거 * ♻️[Refactor] tailwind config 수정 (#97) * ✨[Feat] 로그인 기능 구현 #34 (#45) * [Chore] zod, react-hook-form 설치 #34 * [Feat] label과 input으로 이루어진 입력 FormField 구현 #34 * [Feat] 제출 버튼 구현 #34 * [Feat] 로그인 입력 폼 UI 작업 완료 #34 * [Feat] 비밀번호 가리기 / 보기 기능 구현 #34 * [Test] LoginForm 테스트코드, storybook 작성 #35 * [Test] FormField 테스트코드, storybook 작성 #35 * [Test] SubmitButton 테스트코드, storybook 작성 #35 * [Rename] 각 부분 폴더 생성 #34 * [Feat] 이메일, 비밀번호 제출 기능 구현 #34 * [Test] 로그인 버튼 누르고 isSubmitting 상태인 경우 버튼 비활성화되는지 테스트코드 작성 #35 * [Test] 아이디, 비밀번호 제출되는지 테스트 코드 작성 #35 * [Feat] 이메일, 비밀번호 zod로 유효성 검사 구현 #34 * [Refactor] 비밀번호 가리기 hook으로 분리 #34 * ✨[Feat] 로그인 폼 유효성 검사 통과 시 버튼 활성화 및 색상 변경 #34 * ✨[Feat] 로그인 실패 시 에러 메시지 표시 기능 구현 #40 * ✨[Feat] 로그인 성공시 localstorage에 토큰 저장 #40 * ✨[Feat] 토큰 만료시간 지나면 토큰 삭제 기능 구현 #40 * ♻️[Refactor] 토큰 auth로만 관리 #40 * [Feat] 로그인 성공시 홈으로 리디렉션 #40 * ♻️[Refactor] 토큰 쿠키에 저장으로 변경 #34 * ♻️[Refactor] 에러메시지 상수화 #34 * ✨[Feat] 페이지별 권한에 따른 접근 처리 기능 구현 #43 (#44) * ✨[Feat] 페이지별 권한에 따른 접근 처리 기능 구현 #43 * 🐛[Fix] 빌드에러 useSearchParams Suspense 경계 추가 #43 * ♻️[Refactor] AUTH_REQUIRED_PATHS에서 교환하기 페이지 삭제 * ♻️[Refactor] placeholder 텍스트 상수로 분리 * ♻️[Refactor] onSubmit hook으로 분리 * 🐛[Fix] 충돌 해결 * 🐛[Fix] LoginForm storybook 에러 해결 (#101) * 💄[Design] 헤더 네비게이션 바 디자인 색상 변경 (#90) * 💄[Design] 헤더 바 색상 green-normal로 변경 #9 * 💄[Design] 홈 버튼 bookco로 변경 #9 * ♻️[Refactor] NAV_ITEMS 상수로 분리 #9 * 💄[Design] 네비게이션 버튼 클릭시 색상 변경 #9 * ✅[Test] NAV_ITEMS 상수 분리로 인한 테스트 코드 수정 #9 * ✨[Feat] 로그인 유저 정보 전역으로 관리 기능 구현 #105 (#106) * ✨[Feat] 로그인 유저 정보 전역으로 관리 기능 구현 #105 * ♻️[Refactor] createdAt, updatedAt 타입을 date 객체로 변경 #105 * ✨[Feat] FilterCheckbox 컴포넌트 구현 #73 (#104) * ✅[Test] AvailableClubsFilter test 코드 작성 #73 * ✅[Test] 상태 변화에 따라 변경되는 스타일 확인 테스트 추가 #73 * ✨[Feat] FilterCheckbox 컴포넌트 생성 #73 * 🚚[Rename] FilterCheckbox으로 네이밍 수정 후 공통 컴포넌트 폴더로 이동 #73 * ✨[Feat] FilterCheckbox 컴포넌트 생성 #73 * 💄[Design] label, input 디자인 수정 #73 * ✅[Test] 스토리북 이벤트 관련 로직 추가 #73 * 🎨[Style] 변경된 Tailwind theme 이름으로 수정 #73 * ✅[Test] 체크 상태에 따른 스타일 변경 테스트 케이스 추가 #73 * 🎨[Style] story label 내용 수정 #73 * ♻️[Refactor] checked 속성 필수 prop으로 변경 #73 * ✅[Test] 스토리북에 필수 prop, checked 추가 #73 * ✅[Test] 불필요한 스타일 관련 테스트 제거 #73 * ✨[Feat] common dropdown 구현 #47 (#109) * ✨[Feat] 드롭다운 컴포넌트 브랜치 생성 #47 * ✅[Test] 드롭다운 스토리북 테스트코드 구현 #48 (#50) 드롭다운 스토리북 테스트코드 merge * 💄[Design] DropDown UI 구현 (#67) * ✅[Test] 드롭다운 스토리북 테스트코드 구현 #48 * 💄[Design] rootlayout 상단 padding 추가 (#65) * ✨[Feat] 공통컴포넌트 button 구현 #11 (#37) * ✅[Test] 버튼 테스트 코드 작성 #11 * 📦[Chore] jest.config 수정 * 📦[Chore] tailwind-merge 설치 * ✨[Feat] 버튼 컴포넌트 생성 및 초기 디자인 설정 * 💄[Design] 버튼 기본 스타일 cursor-pointer로 설정 * ✅[Test] 스타일 테스트 추가 * ♻️[Refactor] Home 페이지 button 컴포넌트에 props 추가 * ♻️[Refactor] 타입 선언 type에서 interface로 변경 #11 * 💄[Design] 스토리북 코드 작성 #11 * 💄[Design] 최소 너비 설정 #11 * 📦[Chore] tailwind content 수정 #11 * 📦[Chore] tailwind content 수정 #11 * ♻️[Refactor] button props 변경 및 해당 스타일 설정 #11 * ♻️[Refactor] button props 변경 #11 * ✅[Test] 스타일 관련 테스트 코드 삭제 #11 * 💄[Design] 스토리북 args 수정 #11 * 💬[Comment] test 코드 주석 정리 #11 * ♻️[Refactor] 사이즈, 배경, 색상을 객체 리터럴로 변경 및 variant 추가 #11 * 📝[Docs] 스토리북 버튼 텍스트 및 이름 수정 #11 * ♻️[Refactor] 중복 색상 삭제 및 variantColor에 gray 추가 #11 * 🎨[Style] 상수 이름 영문 대문자 스네이크 표기법으로 변경 #11 * 🎨[Style] 깃 컨벤션 - 함수 표현식에서 함수 선언식으로 수정 #11 * 🔥[Remove] 초기 설정에 bookclub에 작성했던 button 삭제 #11 * ♻️[Refactor] 배경스타일 및 색상 variant 변경 #11 * 📝[Docs] 변경된 Button props명으로 스토리북 args 수정 #11 * ✅[Test] 변경된 props에 따른 테스트 코드 수정 #11 * 💄[Design] DropDown UI 구현#51 * ♻️[Refactor] variant에 filtering 추가. 드롭다운 아이템 리스트 props로 입력받도록 변경. variant에 따른 UI 변경 코드 리팩토링 #51 * 📦[Chore] ci 작업 범위 및 메시지 수정 (#53) * 💄[Design] navbar 프로필 이미지 추가 #51 * ♻️[Refactor] IcSorting color props로 입력받을 수 있도록 수정 #51 * ✨[Feat] WrittenReview, RatingDisplay 컴포넌트 생성 #38 (#49) * ✨[Feat] 평점 표시용 RatingIcon 컴포넌트 추가 #38 * 🔥[Remove] 초시 설정때 생성된 불필요한 Button2 폴더 삭제 #38 * ♻️[Refactor] RatingIcon heartColor에서 checked로 prop 변경 #38 * ✨[Feat] 평점 공통컴포넌트 생성 #38 * ✨[Feat] RatingDisplay 스토리북 작성 #38 * ✨[Feat] WrittenReview 공통 컴포넌트 생성 #38 * ✨[Feat] WrittenReview 스토리북 작성 #38 * 🐛[Fix] WrittenReview 이미지 에러 처리 #38 * ✅[Test] WrittenReview 테스트 코드 작성 #38 * 🚚[Rename] rating에서 rating-display로 폴더명 수정 #38 * 💄[Design] 텍스트 dp font-medium 속성 추가 #38 * 💄[Design] small 사이즈 규격 변경, IcSorting svg path 변경 #51 * 💬[Comment] 주석 정리 #51 * ✅[Test] PR 등록을 위한 임시 테스트 코드 작성 #51 * ✅[Test] 임시 테스트코드 수정 #51 * 🔥[Remove] sorting-button 컴포넌트 폴더 삭제 #51 --------- Co-authored-by: cloud0406 <32586926+cloud0406@users.noreply.github.com> Co-authored-by: Minkyung Kim <97824352+wynter24@users.noreply.github.com> * 📦[Chore] 줄 바꿈 스타일(LF) 통일 .gitattributes 파일 추가 #70 (#71) * ✨[Feat] Color system 및 breakpoint, storybook preview 적용 (#76) * ✨[Feat] color 시스템 도입 * ✨[Feat] 반응형 screen 및 storybook viewport 추가 * ✨[Feat] Avatar, AvatarGroup 컴포넌트 구현 (#69) * ✨[Feat] Avatar 컴포넌트 생성 * ✅[Test] avatar test 코드 작성 * ✅[Test] avatar storybook 코드 작성 * ♻️[Refactor] avatar 컴포넌트 코드 수정 * ✨[Feat] avatargroup 컴포넌트 개발 * ♻️[Refactor] avatarsize 상수 분리 * ✅[Test] avatargroup storybook 코드 작성 * ✨[Feat] avatar onClick 추가 * ✅[Test] avatar test 코드 수정 * ✅[Test] avatargroup test 코드 작성 * 🎨[Style] 따옴표 코드 포맷팅 변경 * ✨[Feat] CardList 컴포넌트 개발 (#42) * ✨[Feat] 아이콘 컴포넌트 생성 * ✨[Feat] 컴포넌트 모바일 디자인 개발 * ✅ [Test] 스토리북 및 preview 추가 #20 * 💄 [Design] padding 변경 #20 * ♻️[Refactor] tailwind config 수정 * ♻️[Refactor] textchip props 이름 변경 * 💄[Design] 반응형 적용, break point 적용 * ✨[Feat] 찜 아이콘 props 및 clickevent props 추가 * 💄[Design] boxsizing 추가 * ✨[Feat] 마감 지우기 아이콘 개발 * 💄[Design] 마감 오버레이 적용 * ✅[Test] 스토리북 여러 환경 테스트 * ♻️[Refactor] props 이름 변경 * ✅[Test] test 코드 작성 * ♻️[Refactor] 레이아웃 코드 수정, 주석 변경 * ✅[Test] 오버레이 테스트 코드 변경 * ✅[Test] 스토리북 코드 변경 * 💄[Design] text css 조정 * 🚚[Rename] 컴포넌트 이름 변경 * ✨[Feat] 아이콘 컴포넌트 생성 * ✨[Feat] 컴포넌트 모바일 디자인 개발 * ✅ [Test] 스토리북 및 preview 추가 #20 * 💄 [Design] padding 변경 #20 * ♻️[Refactor] textchip props 이름 변경 * 💄[Design] 반응형 적용, break point 적용 * ✨[Feat] 찜 아이콘 props 및 clickevent props 추가 * 💄[Design] boxsizing 추가 * ✨[Feat] 마감 지우기 아이콘 개발 * 💄[Design] 마감 오버레이 적용 * ✅[Test] 스토리북 여러 환경 테스트 * ♻️[Refactor] props 이름 변경 * ✅[Test] test 코드 작성 * ♻️[Refactor] 레이아웃 코드 수정, 주석 변경 * ✅[Test] 오버레이 테스트 코드 변경 * ✅[Test] 스토리북 코드 변경 * 💄[Design] text css 조정 * 🚚[Rename] 컴포넌트 이름 변경 * 🔥[Remove] 불필요 구문 제거 * ♻️[Refactor] common DropDown UI 리팩토링 #51 #84 (#93) * ♻️[Refactor] dropdown 리팩토링. dropdown과 sorting 버튼 분류 * ✨[Feat] 드롭다운 컴포넌트 브랜치 생성 #47 * ✅[Test] 드롭다운 스토리북 테스트코드 구현 #48 (#50) 드롭다운 스토리북 테스트코드 merge * ♻️[Refactor] storybook 테스트코드 리팩토링- navbar, filtering small, filtering large로 분류하여 확인 가능 #84 * ♻️[Refactor] Avatar 컴포넌트 사용 #84 * ✅[Test] 임시 테스트코드 수정 #84 * 🔥[Remove] SortingButton.tes.tsx 파일 삭제 * ♻️[Refactor] getButton 함수명 renderButton으로 변경 #84 * ✨[Feat] 로그인 기능 구현 #34 (#45) * [Chore] zod, react-hook-form 설치 #34 * [Feat] label과 input으로 이루어진 입력 FormField 구현 #34 * [Feat] 제출 버튼 구현 #34 * [Feat] 로그인 입력 폼 UI 작업 완료 #34 * [Feat] 비밀번호 가리기 / 보기 기능 구현 #34 * [Test] LoginForm 테스트코드, storybook 작성 #35 * [Test] FormField 테스트코드, storybook 작성 #35 * [Test] SubmitButton 테스트코드, storybook 작성 #35 * [Rename] 각 부분 폴더 생성 #34 * [Feat] 이메일, 비밀번호 제출 기능 구현 #34 * [Test] 로그인 버튼 누르고 isSubmitting 상태인 경우 버튼 비활성화되는지 테스트코드 작성 #35 * [Test] 아이디, 비밀번호 제출되는지 테스트 코드 작성 #35 * [Feat] 이메일, 비밀번호 zod로 유효성 검사 구현 #34 * [Refactor] 비밀번호 가리기 hook으로 분리 #34 * ✨[Feat] 로그인 폼 유효성 검사 통과 시 버튼 활성화 및 색상 변경 #34 * ✨[Feat] 로그인 실패 시 에러 메시지 표시 기능 구현 #40 * ✨[Feat] 로그인 성공시 localstorage에 토큰 저장 #40 * ✨[Feat] 토큰 만료시간 지나면 토큰 삭제 기능 구현 #40 * ♻️[Refactor] 토큰 auth로만 관리 #40 * [Feat] 로그인 성공시 홈으로 리디렉션 #40 * ♻️[Refactor] 토큰 쿠키에 저장으로 변경 #34 * ♻️[Refactor] 에러메시지 상수화 #34 * ✨[Feat] 페이지별 권한에 따른 접근 처리 기능 구현 #43 (#44) * ✨[Feat] 페이지별 권한에 따른 접근 처리 기능 구현 #43 * 🐛[Fix] 빌드에러 useSearchParams Suspense 경계 추가 #43 * ♻️[Refactor] AUTH_REQUIRED_PATHS에서 교환하기 페이지 삭제 * ♻️[Refactor] placeholder 텍스트 상수로 분리 * ♻️[Refactor] onSubmit hook으로 분리 * 🐛[Fix] 충돌 해결 * 🎨[Style] 수정된 컬러 시스템명 적용 #84 * 🐛[Fix] LoginForm storybook 에러 해결 (#101) --------- Co-authored-by: Sungu Kim <108677235+haegu97@users.noreply.github.com> * ✨[Feat] Dropdown 컴포넌트 onclick 이벤트 구현 (#108) * ✅[Test] 드롭다운 스토리북 테스트코드 구현 #48 * 💄[Design] DropDown UI 구현#51 * ♻️[Refactor] variant에 filtering 추가. 드롭다운 아이템 리스트 props로 입력받도록 변경. variant에 따른 UI 변경 코드 리팩토링 #51 * 💄[Design] navbar 프로필 이미지 추가 #51 * ♻️[Refactor] IcSorting color props로 입력받을 수 있도록 수정 #51 * 💄[Design] small 사이즈 규격 변경, IcSorting svg path 변경 #51 * 💬[Comment] 주석 정리 #51 * ✅[Test] PR 등록을 위한 임시 테스트 코드 작성 #51 * ✅[Test] 임시 테스트코드 수정 #51 * 🔥[Remove] sorting-button 컴포넌트 폴더 삭제 #51 * ✨[Feat] 드롭다운 아이템 이외의 요소 클릭 시 드롭다운 접기 기능 구현 * ✨[Feat] 드롭다운 아이템 클릭 시 버튼 라벨을 해당 아이템 라벨로 변경되도록 구현 #68 * ♻️[Refactor] variant 별 dropdown 아이템 리스트를 props로 입력받지 않고 constants로 분리 #68 * 🎨[Style] 변수명 오타 수정 #68 * ✅[Test] DropDown 클릭이벤트 테스트코드 작성 #68 * ♻️[Refactor] useDropDownClose와 onClickDropDownItem에서 setIsOpen(false)로 드롭다운 상태 명시적으로 변경 #68 * 💬[Comment] 테스트코드 주석 추가 #68 * ✅[Test] 테스트코드 수정 #68 * 💬[Comment] 주석 정리 #68 --------- Co-authored-by: cloud0406 <32586926+cloud0406@users.noreply.github.com> Co-authored-by: Minkyung Kim <97824352+wynter24@users.noreply.github.com> Co-authored-by: Sungu Kim <108677235+haegu97@users.noreply.github.com> * ✨[Feat] Tab 컴포넌트 구현 #107 (#111) * ✨[Feat] Tab 컴포넌트 구현 #107 * ✅[Test] Tab 컴포넌트 테스트 코드 작성 #107 * ✅[Test] Tab 컴포넌트 storybook 추가 #107 * ♻️[Refactor] TabType 메인탭, 서브탭 두개로 수정 #107 * ♻️ [Refactor] common Button UI 리팩토링 #99 (#110) * ♻️[Refactor] as const 추가 #99 * 💄[Design] isSubmitting props 추가 및 관련 스타일 추가 #99 * 💄[Design] fillType variant, themeColor 추가 #99 * 🚚[Rename] COLOR_CLASSES 대신COLOR_GROUPS으로 수정 #99 * 💄[Design] 누락된 medium variant 추가 #99 * 💄[Design] lightOutline variant 추가 #99 * ✅[Test] 스토리북에 변경된 디자인 추가 #99 * ✅[Test] 테스트 코드 props 수정 #99 * ♻️[Refactor] DEFAULT_COLOR 제거 및 잘못된 fillType 값 에러 처리 #99 * ♻️[Refactor] constants 폴더로 상수 분리 #99 * ♻️[Refactor] Button 컴포넌트에 props 기본값 추가 #99 * ♻️ [Refactor] Card Component 리팩토링 (#112) * ♻️ [Refactor] chip 컴포넌트 리팩토링 #80 (#85) * ♻️[Refactor] chip 컴포넌트 리팩토링 * 🚚[Rename] card 컴포넌트에서 chip 컴포넌트 업데이트 * ♻️[Refactor] tailwind config 수정 (#97) * ♻️[Refactor] 색상명 변경 * ♻️ [Refactor] particiapntCounter 컴포넌트 리팩토링 #81 (#86) * ♻️[Refactor] 컴포넌트 리팩토링 * ✅[Test] 스토리북 코드 변경 * ✅[Test] 컴포넌트 및 같이 사용되는 Card test 코드 변경 * ♻️[Refactor] tailwind config 수정 (#97) * ♻️[Refactor] 컬러명 변경 * ♻️ [Refactor] confirmedLabel 컴포넌트 리팩토링 #82 (#87) * ♻️[Refactor] 체크 아이콘 색상 및 props 변경 * ♻️[Refactor] 컴포넌트 디자인 수정 및 리팩토링 * ✅[Test] 스토리북 코드 수정 * ✅[Test] 테스트 코드 변경 * ♻️[Refactor] tailwind config 수정 (#97) * ✨[Feat] 로그인 기능 구현 #34 (#45) * [Chore] zod, react-hook-form 설치 #34 * [Feat] label과 input으로 이루어진 입력 FormField 구현 #34 * [Feat] 제출 버튼 구현 #34 * [Feat] 로그인 입력 폼 UI 작업 완료 #34 * [Feat] 비밀번호 가리기 / 보기 기능 구현 #34 * [Test] LoginForm 테스트코드, storybook 작성 #35 * [Test] FormField 테스트코드, storybook 작성 #35 * [Test] SubmitButton 테스트코드, storybook 작성 #35 * [Rename] 각 부분 폴더 생성 #34 * [Feat] 이메일, 비밀번호 제출 기능 구현 #34 * [Test] 로그인 버튼 누르고 isSubmitting 상태인 경우 버튼 비활성화되는지 테스트코드 작성 #35 * [Test] 아이디, 비밀번호 제출되는지 테스트 코드 작성 #35 * [Feat] 이메일, 비밀번호 zod로 유효성 검사 구현 #34 * [Refactor] 비밀번호 가리기 hook으로 분리 #34 * ✨[Feat] 로그인 폼 유효성 검사 통과 시 버튼 활성화 및 색상 변경 #34 * ✨[Feat] 로그인 실패 시 에러 메시지 표시 기능 구현 #40 * ✨[Feat] 로그인 성공시 localstorage에 토큰 저장 #40 * ✨[Feat] 토큰 만료시간 지나면 토큰 삭제 기능 구현 #40 * ♻️[Refactor] 토큰 auth로만 관리 #40 * [Feat] 로그인 성공시 홈으로 리디렉션 #40 * ♻️[Refactor] 토큰 쿠키에 저장으로 변경 #34 * ♻️[Refactor] 에러메시지 상수화 #34 * ✨[Feat] 페이지별 권한에 따른 접근 처리 기능 구현 #43 (#44) * ✨[Feat] 페이지별 권한에 따른 접근 처리 기능 구현 #43 * 🐛[Fix] 빌드에러 useSearchParams Suspense 경계 추가 #43 * ♻️[Refactor] AUTH_REQUIRED_PATHS에서 교환하기 페이지 삭제 * ♻️[Refactor] placeholder 텍스트 상수로 분리 * ♻️[Refactor] onSubmit hook으로 분리 * 🐛[Fix] 충돌 해결 * ♻️[Refactor] 디자인 컬러 변경 --------- Co-authored-by: Sungu Kim <108677235+haegu97@users.noreply.github.com> * ♻️ [Refactor] progressBar 컴포넌트 리팩토링 #83 (#88) * ♻️[Refactor] 코드 리팩토링 및 스토리북 코드 작성 * ✅[Test] Test 로직 수정 * ♻️[Refactor] 카드 컴포넌트 바뀐 progressBar로 수정 * ♻️[Refactor] tailwind config 수정 (#97) * ✨[Feat] 로그인 기능 구현 #34 (#45) * [Chore] zod, react-hook-form 설치 #34 * [Feat] label과 input으로 이루어진 입력 FormField 구현 #34 * [Feat] 제출 버튼 구현 #34 * [Feat] 로그인 입력 폼 UI 작업 완료 #34 * [Feat] 비밀번호 가리기 / 보기 기능 구현 #34 * [Test] LoginForm 테스트코드, storybook 작성 #35 * [Test] FormField 테스트코드, storybook 작성 #35 * [Test] SubmitButton 테스트코드, storybook 작성 #35 * [Rename] 각 부분 폴더 생성 #34 * [Feat] 이메일, 비밀번호 제출 기능 구현 #34 * [Test] 로그인 버튼 누르고 isSubmitting 상태인 경우 버튼 비활성화되는지 테스트코드 작성 #35 * [Test] 아이디, 비밀번호 제출되는지 테스트 코드 작성 #35 * [Feat] 이메일, 비밀번호 zod로 유효성 검사 구현 #34 * [Refactor] 비밀번호 가리기 hook으로 분리 #34 * ✨[Feat] 로그인 폼 유효성 검사 통과 시 버튼 활성화 및 색상 변경 #34 * ✨[Feat] 로그인 실패 시 에러 메시지 표시 기능 구현 #40 * ✨[Feat] 로그인 성공시 localstorage에 토큰 저장 #40 * ✨[Feat] 토큰 만료시간 지나면 토큰 삭제 기능 구현 #40 * ♻️[Refactor] 토큰 auth로만 관리 #40 * [Feat] 로그인 성공시 홈으로 리디렉션 #40 * ♻️[Refactor] 토큰 쿠키에 저장으로 변경 #34 * ♻️[Refactor] 에러메시지 상수화 #34 * ✨[Feat] 페이지별 권한에 따른 접근 처리 기능 구현 #43 (#44) * ✨[Feat] 페이지별 권한에 따른 접근 처리 기능 구현 #43 * 🐛[Fix] 빌드에러 useSearchParams Suspense 경계 추가 #43 * ♻️[Refactor] AUTH_REQUIRED_PATHS에서 교환하기 페이지 삭제 * ♻️[Refactor] placeholder 텍스트 상수로 분리 * ♻️[Refactor] onSubmit hook으로 분리 * 🐛[Fix] 충돌 해결 * ♻️[Refactor] 색상 변경 --------- Co-authored-by: Sungu Kim <108677235+haegu97@users.noreply.github.com> * merge participantcounter storybook * ✨[Feat] Card Header, Footer 레이아웃 및 스토리북 구현 * 💄[Design] 지난 모임일 경우 색상 변경 * ✨[Feat] CardHeader icon 추가 * ✨[Feat] cardHost 구현 * ✨[Feat] card Image 추가 * 💄[Design] 모바일 레이아웃 잡기 * ✨[Feat] simpleCard 컴포넌트 개발 * ✨[Feat] 오버레이 및 모임 상세 페이지 카드 구현 * ✨[Feat] 심플카드 레이아웃 및 이벤트 동작 테스트 * ✨[Feat] 심플카드 타입 정리 * ✨[Feat] fullCard 적용 및 스토리북 작성 * 🚚[Rename] type 폴더 수정 * ✅[Test] 테스트 코드 작성 * 💬[Comment] 주석 변경 * ✨[Feat] 호스트 컴포넌트 아바타 props 추가 * 💬[Comment] 주석 추가 * 💄[Design] 버튼 레이아웃 수정 * ♻️[Refactor] confimreLabe variant 받도록 추가 * ♻️[Refactor] 스토리 북 추가 * ♻️[Refactor] 체크박스 리팩토링 --------- Co-authored-by: Sungu Kim <108677235+haegu97@users.noreply.github.com> * ✨[Feat] 검색창 구현 #120 (#121) * ✨[Feat] 검색창 구현 #120 * ✅[Test] 검색창 테스트 코드 작성, storybook 생성 #120 * ♻️[Refactor] width, height prop 제거 #120 * ♻️[Refactor] 돋보기 아이콘 width, height prop으로 추가 #120 * ✨[Feat] 헤더 바에 있는 유저 버튼 드롭다운 버튼으로 변경 #103 (#118) * 💄[Design] 프로필 사진이 없는 유저 아이콘 생성 #103 * ✨[Feat] 로그인 상태에서 프로필 이미지 드롭다운 버튼으로 변경 #103 * 🔥[Remove] 테스트용 유저이미지 삭제 #103 * ✅[Test] 로그인 유무에 따른 렌더 테스트 코드 작성 #103 * ♻️[Refactor] 로그인 버튼 공용 컴포넌트 버튼으로 변경 #124 (#127) * ♻️[Refactor] 로그인 버튼 공용 컴포넌트 버튼으로 변경 #124 * 🔥[Remove] 기존 로그인 버튼 삭제 #124 * ✨[Feat] Common SortingButton 구현 #94 (#117) * ✨[Feat] 드롭다운 컴포넌트 브랜치 생성 #47 * ✅[Test] 드롭다운 스토리북 테스트코드 구현 #48 (#50) 드롭다운 스토리북 테스트코드 merge * 💄[Design] DropDown UI 구현 (#67) * ✅[Test] 드롭다운 스토리북 테스트코드 구현 #48 * 💄[Design] rootlayout 상단 padding 추가 (#65) * ✨[Feat] 공통컴포넌트 button 구현 #11 (#37) * ✅[Test] 버튼 테스트 코드 작성 #11 * 📦[Chore] jest.config 수정 * 📦[Chore] tailwind-merge 설치 * ✨[Feat] 버튼 컴포넌트 생성 및 초기 디자인 설정 * 💄[Design] 버튼 기본 스타일 cursor-pointer로 설정 * ✅[Test] 스타일 테스트 추가 * ♻️[Refactor] Home 페이지 button 컴포넌트에 props 추가 * ♻️[Refactor] 타입 선언 type에서 interface로 변경 #11 * 💄[Design] 스토리북 코드 작성 #11 * 💄[Design] 최소 너비 설정 #11 * 📦[Chore] tailwind content 수정 #11 * 📦[Chore] tailwind content 수정 #11 * ♻️[Refactor] button props 변경 및 해당 스타일 설정 #11 * ♻️[Refactor] button props 변경 #11 * ✅[Test] 스타일 관련 테스트 코드 삭제 #11 * 💄[Design] 스토리북 args 수정 #11 * 💬[Comment] test 코드 주석 정리 #11 * ♻️[Refactor] 사이즈, 배경, 색상을 객체 리터럴로 변경 및 variant 추가 #11 * 📝[Docs] 스토리북 버튼 텍스트 및 이름 수정 #11 * ♻️[Refactor] 중복 색상 삭제 및 variantColor에 gray 추가 #11 * 🎨[Style] 상수 이름 영문 대문자 스네이크 표기법으로 변경 #11 * 🎨[Style] 깃 컨벤션 - 함수 표현식에서 함수 선언식으로 수정 #11 * 🔥[Remove] 초기 설정에 bookclub에 작성했던 button 삭제 #11 * ♻️[Refactor] 배경스타일 및 색상 variant 변경 #11 * 📝[Docs] 변경된 Button props명으로 스토리북 args 수정 #11 * ✅[Test] 변경된 props에 따른 테스트 코드 수정 #11 * 💄[Design] DropDown UI 구현#51 * ♻️[Refactor] variant에 filtering 추가. 드롭다운 아이템 리스트 props로 입력받도록 변경. variant에 따른 UI 변경 코드 리팩토링 #51 * 📦[Chore] ci 작업 범위 및 메시지 수정 (#53) * 💄[Design] navbar 프로필 이미지 추가 #51 * ♻️[Refactor] IcSorting color props로 입력받을 수 있도록 수정 #51 * ✨[Feat] WrittenReview, RatingDisplay 컴포넌트 생성 #38 (#49) * ✨[Feat] 평점 표시용 RatingIcon 컴포넌트 추가 #38 * 🔥[Remove] 초시 설정때 생성된 불필요한 Button2 폴더 삭제 #38 * ♻️[Refactor] RatingIcon heartColor에서 checked로 prop 변경 #38 * ✨[Feat] 평점 공통컴포넌트 생성 #38 * ✨[Feat] RatingDisplay 스토리북 작성 #38 * ✨[Feat] WrittenReview 공통 컴포넌트 생성 #38 * ✨[Feat] WrittenReview 스토리북 작성 #38 * 🐛[Fix] WrittenReview 이미지 에러 처리 #38 * ✅[Test] WrittenReview 테스트 코드 작성 #38 * 🚚[Rename] rating에서 rating-display로 폴더명 수정 #38 * 💄[Design] 텍스트 dp font-medium 속성 추가 #38 * 💄[Design] small 사이즈 규격 변경, IcSorting svg path 변경 #51 * 💬[Comment] 주석 정리 #51 * ✅[Test] PR 등록을 위한 임시 테스트 코드 작성 #51 * ✅[Test] 임시 테스트코드 수정 #51 * 🔥[Remove] sorting-button 컴포넌트 폴더 삭제 #51 --------- Co-authored-by: cloud0406 <32586926+cloud0406@users.noreply.github.com> Co-authored-by: Minkyung Kim <97824352+wynter24@users.noreply.github.com> * ♻️[Refactor] dropdown 리팩토링. dropdown과 sorting 버튼 분류 * ✨[Feat] 드롭다운 컴포넌트 브랜치 생성 #47 * ✅[Test] 드롭다운 스토리북 테스트코드 구현 #48 (#50) 드롭다운 스토리북 테스트코드 merge * ♻️[Refactor] storybook 테스트코드 리팩토링- navbar, filtering small, filtering large로 분류하여 확인 가능 #84 * ♻️[Refactor] Avatar 컴포넌트 사용 #84 * ✅[Test] 임시 테스트코드 수정 #84 * 🔥[Remove] SortingButton.tes.tsx 파일 삭제 * 💄[Design] SortingButton UI 변경 적용, ✅[Test] 스토리북 테스트코드 수정 * 🎨[Style] 컬러 시스템 이름 변경 적용 #94 * ✨[Feat] sorting button onclick 이벤트 추가 #94 * ✅[Test] SortingButton jest 테스트코드 작성 * 🔥[Remove]DroptDown.stories.tsx 삭제(파일명 오타로 인해 변경했으나 merge 과정 중 삭제되지 않음) #94 * 🐛[Fix] 최신순, 오래된순 정렬 버튼일 때는 일괄적으로 그레이 컬러로 표시되도록 변경 #94 --------- Co-authored-by: cloud0406 <32586926+cloud0406@users.noreply.github.com> Co-authored-by: Minkyung Kim <97824352+wynter24@users.noreply.github.com> * ✨[Feat] 로그아웃 기능 구현 #128 (#131) * ✨[Feat] 로그아웃 기능 구현 #128 * ♻️[Refactor] 로그아웃 시 리다이렉션 router.push에서 router.replace로 수정 #128 * ♻️[Refactor] 라우팅 변경 #128 * ♻️[Refactor] 스토리북 수정 #128 * ♻️[Refactor] feature common popup #10 (#133) * 💄[Design] PopUp 컴포넌트 레이아웃 구현 #10 * ✨[Feat] PopUp의 Button 컴포넌트 구현, 스토리북 코드 작성 #31 * 💄[Design] 팝업창 css 구현 완료 ✅[Test] 팝업창 스토리북 테스트 코드 구현 완료 #10 * ✅[Test] 팝업창 스토리북 테스트코드 타입별 코드 추가 #26 * ♻️[Refactor] Button 컴포넌트 이용하여 PopUp 컴포넌트 리팩토링 #10 * 🔥[Remove] PopUpButton 컴포넌트 파일 삭제 #10 * ✅[Test] PopUp 컴포넌트 jest 테스트코드 수정 #10 * ♻️ [Refactor] Compound Pattern 적용하여 WrittenReview 컴포넌트 구조 개선 #100 (#130) * 💄[Design] WrittenReview, RatingIcon 변경된 디자인으로 수정 #100 * ♻️[Refactor] 이미지 에러 처리 로직 간소화 및 상위 컴포넌트로 책임 분리 #100 * 💄♻️[Design, Refactor] UI 디자인 변경 및 컴포넌트 컴파운드 패턴 적용 #100 * ✅[Test] 스토리북 수정 #100 * 🔥[Remove] WrittenReview 테스트 파일 삭제 #100 * 💄[Design] Sub_Tab 디자인 변경 (#136) * 💄[Design] 버튼 색상 추가 #134 * ♻️[Refactor] SubTab 디자인 변경 #134 * ♻️[Refactor] 토큰 만료 시간 추가, 헤더 바 새로고침 시 isLoggedIn 상태 확인 #137 (#138) * ♻️[Refactor] 토큰 만료기한 추가 #137 * ♻️[Refactor] 새로고침 시 토큰 유무 확인 #137 * ✅[Test] 테스트 코드 수정 #137 * ✨ [Feature] 나의 모임 카드 구현 (#142) * ♻️[Refactor] chip 형태 리팩토링 * ✨[Feat] 모임 칩 구현 * ✅[Test] 테스트 코드 작성 * ✅[Test] 스토리북 경로 조정 * ♻️[Refactor] text 자동지정되도록 수정 * ✨[Feat] 기본 레이아웃 구현 * ♻️[Refactor] 버튼 컴포넌트 리팩토링 #143 (#144) * ♻️[Refactor] 버튼 컴포넌트 컬러클래스 코드 리팩토링, COLOR_SCHEMES 수정, 스토리북 수정 #143 * 🎨[Style]layout 배경색상 변경, 패딩값 변경 * ✨[Feat] Modal 컴포넌트, 프로필 수정 / 리뷰 작성 모달 개발 #141 (#145) * ♻️[Refactor] avatar xl 사이즈 추가 #141 * ✨[Feat] 수정하기 아이콘 추가 #141 * ♻️[Refactor] className을 prop으로 받아 커스텀 디자인 할 수 있게 리팩토링 #141 * ✨[Feat] Modal 컴포넌트 개발 #141 * ✨[Feat] 프로필 수정 모달 개발 #141 * ♻️[Refactor] 오타 수정 #141 * 🚚[Rename] 프로필 수정 모달 위치 변경 #141 * ✅[Test] 테스트코드, storybook 작성 #141 * 💄[Design] 추가된 색상으로 변경 #141 * 💄[Design] margin 추가 #141 * 💄[Design] 제목 텍스트 크기 변경 #141 * ♻️[Refactor] 코드 위치 가독성 좋게 수정 #141 * ✨[Feat] 리뷰 평점 하트 개발 #141 * ✨[Feat] 리뷰 작성 모달 개발 #141 * ✅[Test] 스토리북 수정 #141 * ♻️[Refactor] 닫기 버튼 icClose로 변경 #141 * ♻️[Refactor] 하트 아이콘 ratingIcon으로 변경 #141 * 🔥[Remove] 리뷰하트아이콘 삭제 #141 * ✅[Test] 테스트 코드 수정 #141 * [Merge] 모임 페이지 branch와 develop 병합 #72 (#150) * 라인 엔딩 정규화: .gitattributes 설정 반영 * 🐛[Fix] normalize line endings #72 * 💄[Design] 책 모임 메인페이지 UI 구현 #132 (#146) * ✨ [Feature] 나의 모임 카드 구현 (#142) * ♻️[Refactor] chip 형태 리팩토링 * ✨[Feat] 모임 칩 구현 * ✅[Test] 테스트 코드 작성 * ✅[Test] 스토리북 경로 조정 * ♻️[Refactor] text 자동지정되도록 수정 * ✨[Feat] 기본 레이아웃 구현 * ✨[Feat] 모임메인페이지 Header UI 생성 #132 * 라인 엔딩 정규화: .gitattributes 설정 반영 * 🐛[Fix] normalize line endings #72 * ✨[Feat] 모임메인페이지 Header UI 생성 #132 * 🐛[Fix] DropDown, SortingButton 컴포넌트에 use client 추가 #132 * ✨[Feat] 반응형 구현 #132 * ♻️[Refactor] 버튼 컴포넌트 리팩토링 #143 (#144) * ♻️[Refactor] 버튼 컴포넌트 컬러클래스 코드 리팩토링, COLOR_SCHEMES 수정, 스토리북 수정 #143 * 🎨[Style]layout 배경색상 변경, 패딩값 변경 * 🐛[Fix] Card 공통 컴포넌트에 use client 추가 #132 * ✨[Feat] 책모임 Mian 컴포넌트 생성 #132 * ✨[Feat] 책모임 FilterBaR 컴포넌트 생성 #132 * ♻️[Refactor] 전체 구조 개선 #132 * 라인 엔딩 정규화: .gitattributes 설정 반영 * 🐛[Fix] normalize line endings #72 * ✨[Feat] 모임메인페이지 Header UI 생성 #132 * Fix: Resolve merge conflicts in package-lock.json during rebase * ✨[Feat] 모임메인페이지 Header UI 생성 #132 * 🐛[Fix] DropDown, SortingButton 컴포넌트에 use client 추가 #132 * ✨[Feat] 반응형 구현 #132 * 🐛[Fix] Card 공통 컴포넌트에 use client 추가 #132 * ✨[Feat] 책모임 Mian 컴포넌트 생성 #132 * ✨[Feat] 책모임 FilterBaR 컴포넌트 생성 #132 * ♻️[Refactor] 전체 구조 개선 #132 --------- Co-authored-by: cloud0406 <32586926+cloud0406@users.noreply.github.com> Co-authored-by: sun <104830526+sunnwave@users.noreply.github.com> --------- Co-authored-by: cloud0406 <32586926+cloud0406@users.noreply.github.com> Co-authored-by: sun <104830526+sunnwave@users.noreply.github.com> * ♻️[Refactor] 토큰 만료 시 유저 정보 초기화 #148 (#149) * 💄[Design] 프로필 페이지 레이아웃 구현 #119 (#152) * 💄[Design] 프로필페페이지 레이아웃 설정 #119 * 💄[Design] 프로필 페이지 레이아웃 구현 #119 * ✨[Feat] WrittenReview를 활용한 ClubReview 컴포넌트 생성 #154 (#156) * 💄[Design] nav, 공통 레이아웃 수정 #154 * ✨[Feat] ClubReview 컴포넌트 생성 #154 * ✅[Test] WrittenReview 스토리북 수정 #154 * ♻️ [Refactor] Card 리팩토링 (#151) * ✨[Feat] box, title, location, datetime 추가 * ✨[Feat] 오버레이 및 스토리북 추가 * 🚚[Rename] 스토리북 코드 이전 * ✨[Feat] 임시 디폴트 카드 및 스토리북 적용 * ✨[Feat] 디폴트 카드 레이아웃 구현 * ♻️[Refactor] clubchip variant추가 * ✨[Feat] 칩 수정 * 💄[Design 레이아웃 일부 변경및 스토리북 수정 * ✨[Feat] 책모임, 찜하기 카드 구현 완료 * 🔥[Remove] 불필요 파일 제거 * ♻️[Refactor] 오버레이 버튼 컴포넌트로 대체 * ✨[Feat] 내가 만든 모임 카드 구현 * ✨[Feat] 나의 모임 카드 구현 * ♻️[Refactor] 내가 만든모임 찜, 블러 기능 제거 * ♻️[Refactor] 인터페이스 공통화 및 주석 처리 * ♻️[Refactor] 스토리북 수정 * ✨[Feat] 상세 카드 임시 레이아웃 구현 및 스토리북 적용 * 💄[Design] 상세 카드 이미지 레이아웃 수정 * ✨[Feat] 상세 카드 구현 완료 * 🚚[Rename] 스토리북 변경 * 🚚[Rename] 불필요 코드 제거 및 이동 * 💬[Comment] 주석 처리 * button 중복 코드 제거 * 📝[Docs] 임시 주석 처리 * ✨[Feat] 회원가입 기능 구현 #91 (#163) * 💄[Design] 모임 상세 페이지 UI 구현 #147 (#166) * ✨[Feat] 모임 상세 페이지 구현을 위한 폴더 및 파일 생성 #147 * ✨[Feat] 모임 상세페이지 추가 #147 * 💄[Design] 컴포넌트 분리 및 DescriptionSection UI 생성 #147 * ♻️[Refactor] ReviewSummarySection 리뷰 점수 map으로 구현 #147 * 💄[Design] DropDown 최신순 버튼 border 제거 #147 * 💄[Design] 리뷰 목록 UI 생성 #147 * 🐛[Fix] 클라인언트 컴포넌트 표시 #147 * ♻️[Refactor] ClubReview 컴포넌트 사용 #147 * 🐛[Fix] 이미지 경로 /images/profile.png로 수정 #147 * 💄[Design] ReviewSummarySection 반응형 수정 #147 * 💄[Design] variant: 'detailedClub' - cursor-default 추가 #147 * ✨[Feat] Card 컴포넌트 적용 #147 * 📝[Docs] mockReview 수정 #147 * [Merge] 배포 테스트를 위한 병합 - 모임메인페이지 merge to develop (#169) * 🚚[Rename] 컴포넌트 네이밍 수정 #158 * ✨[Feat] UI 컴포넌트에게 가져온 데이터를 전달하기 위한 로직 작성중 #158 * ♻️[Refactor] 탭 컴포넌트 분리 #158 * ✨[Feat] API 호출 로직 작성중 #158 * ♻️[Refactor] 수정된 Card 컴포넌트 사용 #158 * 💄[Design] 드롭다운 디자인 수정중 #158 * ✨[Feat] feature page profile 프로필 컴포넌트 구현 #153 (#164) * 💄[Design] 프로필페페이지 레이아웃 설정 #119 * 💄[Design] 프로필 페이지 레이아웃 구현 #119 * 💄[Design] 프로필페이지 프로필 컴포넌트 UI 구현 #153 * 💄[Design] text 스타일 수정 #153 * ♻️[Refactor] ProfilePage 컴포넌트 프레그먼트 제거 #153 * ✨[Feat] useAuthStore 훅 사용하여 로그인한 사용자 정보 받기 추가 #153 * ✅[Test] 프로필 컴포넌트 프로필 수정하기 모달 테스트코드 작성 #153 * ✅[Test] 프로필 컴포넌트 스토리북 테스트코드 오류 수정 #153 * ✅[Test] 테스트 변수명 변경 #153 * ✅[Test] 스토리북 테스트코드 변수명 변경 #153 * ✨ [Feature] 모임 만들기 페이지 구현 (#171) * ✨ [Feature] 모임 만들기 페이지 UI (#122) * 💄[Design] 전체 레이아웃 형성 * ✨[Feat] 라벨 및 엘리멘트 요소 컴포넌트화 * 🚚[Rename] 컴포넌트 이름 변경 * ✨[Feat] maxLength 설정 * 💄[Design] 레이아웃 디테일 수정 * 💄[Design] 버튼 및 이미지 input 수정 * 💄[Design] border 색 수정 * ✨[Feat] 라디오 버튼 영역 컴포넌트화 * ✨[Feat] input요소들 컴포넌트화 * 🚚[Rename] 스키마 파일 분리 * ✨[Feat] inputFiled로 공통화 * ♻️[Refactor] 컴포넌트 컨벤션대로 변경 * 💄[Design] 루트 레이아웃 수정 * ✨[Feat] 115 feature 모임 만들기 페이지 UI api 연동 (#167) * ✨ [Feat] 모임 만들기 react-date-picker 적용 (#139) * 📦[Chore] React-datepicker 설치 * ✨[Feat] datepicker 포함 폼 데이터 전송 테스트 * ✨[Feat] 폼데이터 이미지, 북클럽 분리 * ✨[Feat] 스키마 값 백엔드 데이터대로 수정 * ✨[Feat] 한국 시간으로 날짜 데이터 변환 * ✨[Feat] 훅 분리 * ✨[Feat] 날짜 Ui 포맷 변경 * ✨[Feat] datepicker 컴포넌트 분리 * ✨[Feat] 주소 api 적용 테스트 * ✨[Feat] 오프라인 클릭시 시군구, 동 정보 저장 * ✨[Feat] 스키마 에러 메시지 추가 및 주소 훅 분리 * 💬[Comment] 주석 제거 * ✨[Feat] 생성 api 테스트 * ✨[Feat] 폼 제출 훅 분리 * 🚚[Rename] 폼 컨테이너 분리 * 🚚[Rename] 페이지 내부 컨테이너 분리 * 🚚[Rename] 이미지 필드 분리 * 🚚[Rename] 폼제출 훅 분리 * 🚚[Rename] 훅 & 컨테이너 최종 분리 * 🚚[Rename] api 코드 분리 * ✨ [Feature] 모임 만들기 페이지 디테일 수정 (#170) * ✨ [Feat] 모임 만들기 react-date-picker 적용 (#139) * 📦[Chore] React-datepicker 설치 * ✨[Feat] datepicker 포함 폼 데이터 전송 테스트 * ✨[Feat] 폼데이터 이미지, 북클럽 분리 * ✨[Feat] 스키마 값 백엔드 데이터대로 수정 * ✨[Feat] 한국 시간으로 날짜 데이터 변환 * ✨[Feat] 훅 분리 * ✨[Feat] 날짜 Ui 포맷 변경 * ✨[Feat] datepicker 컴포넌트 분리 * ✨[Feat] 주소 api 적용 테스트 * ✨[Feat] 오프라인 클릭시 시군구, 동 정보 저장 * ✨[Feat] 스키마 에러 메시지 추가 및 주소 훅 분리 * 💬[Comment] 주석 제거 * ✨[Feat] 생성 api 테스트 * ✨[Feat] 폼 제출 훅 분리 * 🚚[Rename] 폼 컨테이너 분리 * 🚚[Rename] 페이지 내부 컨테이너 분리 * 🚚[Rename] 이미지 필드 분리 * 🚚[Rename] 폼제출 훅 분리 * 🚚[Rename] 훅 & 컨테이너 최종 분리 * 🚚[Rename] api 코드 분리 * ✨[Feat] 이미지 확장자 및 사이즈 검사 * 💄[Design] 전체 레이아웃 수정 * 💄[Design] 라디오 버튼 디자인 변경 --------- Co-authored-by: cloud0406 <32586926+cloud0406@users.noreply.github.com> Co-authored-by: cloud0406 <cloud0406@naver.com> Co-authored-by: Minkyung Kim <97824352+wynter24@users.noreply.github.com> Co-authored-by: sun <104830526+sunnwave@users.noreply.github.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
5 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
PR 내용이 조금 깁니다.. 그나마 gpt한테 정리 부탁해서 이 정도긴 한데 궁금한 부분 있으시면 언제든 말씀해주세요 🙏
#️⃣연관된 이슈
📝작업 내용
1. 기본 모달 컴포넌트
필수 Props
isOpen(boolean)모달 표시 여부를 설정합니다.
onClose(function)모달을 닫는 함수입니다.
title(string)모달 상단에 표시될 제목입니다.
onConfirm(function)확인 버튼 클릭 시 실행될 함수입니다.
cancelText(string)취소 버튼에 표시될 텍스트입니다.
confirmText(string)확인 버튼에 표시될 텍스트입니다.
children(ReactNode)모달 내부에 표시될 컨텐츠입니다.
선택적 Props
cancelButtonProps여기서 취소 버튼의 색상 커스텀 하면 됩니다.
confirmButtonProps여기서 취소 버튼의 색상 커스텀 하면 됩니다.
2. 프로필 수정하기 모달
구조
1.
ProfileEditContent(현재 달램핏 api 활용하여 구현해서 코드에서는 임시로 "companyName" 사용중)ProfileEditContent는 모달 내부에 표시되는 콘텐츠를 담당하는 하위 컴포넌트입니다.(children)formData: 현재 입력된 데이터를 포함하는 객체입니다.handleChange: 입력 값이 변경될 때 호출되는 함수입니다.2.
ProfileEditModalProps
isOpen: 모달 표시 여부를 결정합니다.onClose: 모달을 닫는 함수입니다.onConfirm: 수정된 데이터를 부모 컴포넌트로 전달하는 함수입니다.profileData: 초기 프로필 데이터를 포함하는 객체입니다.내부 상태
formData: 닉네임, 한 줄 소개, 이미지 데이터를 관리하는 상태입니다.profileData또는 현재 사용자의 데이터를 참고하여 초기화됩니다.핸들러 함수
handleChange: 입력 필드 변경 시 호출되며, 상태를 업데이트합니다.handleConfirm:onConfirm을 호출하여 부모 컴포넌트에 수정된 데이터를 전달합니다.Props 및 상태 초기화
formData초기화profileData또는useAuthStore에서 제공받은 사용자 데이터를 기본값으로 설정.코드 흐름
ProfileEditModal이 열리면isOpen이true가 되어 모달이 표시됩니다.handleChange가 호출되어formData상태가 업데이트됩니다.handleConfirm이 호출되어 수정된formData가 부모 컴포넌트로 전달됩니다.onClose가 호출되어 모달이 닫힙니다.3. 리뷰 작성하기 모달
WriteReviewModal은 별도의 콘텐츠 컴포넌트인WriteReviewContent를 활용하며, 사용자의 평점과 리뷰 내용을 입력받아 부모 컴포넌트로 전달합니다.동작 설명
1. WriteReviewModal
isOpen: boolean: 모달의 열림/닫힘 상태를 제어합니다.onClose: () => void: 모달을 닫는 함수입니다.onConfirm: (rating: number, review: string) => void: 사용자가 입력한 평점과 리뷰 데이터를 부모 컴포넌트로 전달하는 함수입니다.rating: number: 사용자가 선택한 평점 상태입니다. 초기값은5입니다.review: string: 사용자가 입력한 리뷰 내용 상태입니다.onConfirm이 호출되며 평점과 리뷰 데이터를 전달합니다.2. WriteReviewContent
rating: number: 상위 컴포넌트에서 전달받은 평점 상태입니다.setRating: (rating: number) => void: 평점 상태를 업데이트하는 함수입니다.review: string: 상위 컴포넌트에서 전달받은 리뷰 상태입니다.setReview: (review: string) => void: 리뷰 상태를 업데이트하는 함수입니다.\Props와 내부 상태 흐름
isOpenWriteReviewModalonCloseWriteReviewModalonConfirmWriteReviewModalratingWriteReviewModal→WriteReviewContentsetRatingWriteReviewModal→WriteReviewContentreviewWriteReviewModal→WriteReviewContentsetReviewWriteReviewModal→WriteReviewContent기타 참고사항